<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>个人中心</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link th:href="@{/animate.min.css}" rel="stylesheet">
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}" media="all">
    <script th:src="@{/common.js}"></script>


    <style>

        a {
            cursor: pointer;
        }

        .line {
            width: 95%;
            border-bottom: 2px solid #eee;
            height: 2%;
        }

    </style>

</head>
<body style="background-color: #F8F8F8;overflow-x: hidden">
<div>

    <!--    顶部导航-->
    <div class="layui-header" style="background-color: black;">
        <ul class="layui-nav layui-layout-left" style="background-color: black">
            <li class="layui-nav-item"><a
                    onclick="window.location.href='/user/index?loginName='+ getQueryVariable('loginName')">首页</a></li>
            <li class="layui-nav-item"><a
                    onclick="window.location.href='/user/myTopic?loginName='+ getQueryVariable('loginName')">我的话题</a>
            </li>
            <li class="layui-nav-item"><a
                    onclick="window.location.href='/user/followedTopic?loginName='+ getQueryVariable('loginName')">关注话题</a>
            </li>
            <li class="layui-nav-item layui-this"><a
                    onclick="window.location.href='/user/info?loginName='+ getQueryVariable('loginName')">个人中心</a></li>
        </ul>
        <ul class="layui-nav layui-layout-right" style="background-color: black">
            <li class="layui-nav-item">
                <a href="javascript:;">
                    <span><text th:text="${param.loginName}"></text></span>
                </a>
            </li>
            <li class="layui-nav-item"><a th:href="@{/userController/logout}">退出</a></li>
        </ul>
    </div>

    <!--    内容-->
    <div style="display: flex;position: relative;top: 60px">

        <!--    左侧菜单-->
        <div style="width: 23%;height: 200px">
            <div class="layui-panel" style="position:relative;top: 10px;left: 60px;width: 75%;box-shadow:0 0 10px
            #E0E0E0;border-radius: 10px">
                <ul class="layui-menu" id="docDemoMenu1">
                    <li lay-options="{id: 1}">
                        <div class="layui-menu-body-title" style="text-align: center;font-size: 16px">
                            个人信息
                        </div>
                    </li>
                    <li lay-options="{id: 2}">
                        <div class="layui-menu-body-title" style="text-align: center;font-size: 16px">
                            修改密码
                        </div>
                    </li>

                </ul>
            </div>

        </div>

        <!--        右侧内容-->
        <div style="width: 77%;height: 500px">
            <div class="animated fadeIn" style="width: 90%;height: 400px;background-color: #fff;border: solid
                #E0E0E0 1px;border-radius: 10px;box-shadow:0 0 10px #E0E0E0;position: relative;top: 10px;left: 30px">

                <!--                标题栏-->
                <div style="height: 8%">
                    <div style="position: relative;top: 50%;left: 2%">
                        <span style="font-size: 15px">信息</span>
                    </div>
                </div>

                <div class="line" style="position: relative;left: 18px"></div>

                <input id="password" readonly type="text" style="display: none">
                <!--     内容-->
                <div id="appendArea" style="height: 75%;position: relative;top: 2%;display: flex">
                    <!--                    信息-->
                    <div style="width: 75%;padding-left:40px ">
                        <div style="width: 100%;display: flex;position: relative;top: 8%">
                            <div style="font-size: 18px;width: 20%">登录名</div>
                            <input id="loginName" readonly
                                   style="cursor: not-allowed;border: none;width: 70%;font-size: 18px"
                                   type="text">
                        </div>
                        <div class="line" style="height: 30px"></div>
                        <div style="width: 100%;display: flex;position: relative;top: 8%">
                            <div style="font-size: 18px;width: 20%">姓名</div>
                            <input onchange='modifyInfo(this)' id="name" style="border: none;width: 70%;font-size: 18px"
                                   type="text">
                        </div>
                        <div class="line" style="height: 30px"></div>
                        <div style="width: 100%;display: flex;position: relative;top: 8%">
                            <div style="font-size: 18px;width: 20%">电话</div>
                            <input maxlength='20' onchange='modifyInfo(this)' id="tel" style="border: none;width: 70%;font-size:
                            18px" type="text">
                        </div>
                        <div class="line" style="height: 30px"></div>
                        <div style="width: 100%;display: flex;position: relative;top: 8%">
                            <div style="font-size: 18px;width: 20%">住址</div>
                            <input onchange='modifyInfo(this)' id="address"
                                   style="border: none;width: 70%;font-size: 18px" type="text">
                        </div>
                        <div class="line" style="height: 30px"></div>
                        <div style="width: 100%;display: flex;position: relative;top: 8%">
                            <div style="font-size: 18px;width: 20%">注册日期</div>
                            <input id="createTime" readonly
                                   style="cursor: not-allowed;border: none;width: 70%;font-size: 18px" type="text">
                        </div>
                        <div class="line" style="height: 30px"></div>
                    </div>

                    <!--                    头像-->
                    <div id="profileDiv" style="width: 25%">
                        <input onchange="changeProfile(this)" type="file" id="profile" name="profile"
                               style="display: none">
                        <div onclick='$("#profile").click();' style="border-radius: 20px;width: 150px; position: relative;height:
                                    150px;box-shadow: 0 0 8px;top: 30px;left: 30px;">
                            <span style='position: relative;top: 45%;left: 18%;font-size: 15px'>点击上传头像</span>
                        </div>
                    </div>

                </div>

            </div>
        </div>
    </div>


</div>


</div>


<script th:src="@{/layui/jquery-1.11.2.js}"></script>
<script th:src="@{/layui/layui.js}" charset="utf-8"></script>
<script>
    $(function () {
        layui.use(['element', 'form', 'table', 'layer', 'dropdown'], function () {
            var element = layui.element;
            var form = layui.form;
            var table = layui.table;
            var layer = layui.layer;
            var dropdown = layui.dropdown;
            getInfo();

            dropdown.on('click(docDemoMenu1)', function (options) {
                let appendArea = $("#appendArea");
                appendArea.empty();
                console.log(options);
                if (options.id == '1') {          //菜单列表的 lay-options 中的参数为1  加载用户信息
                    appendArea.append(" <!--                    信息-->" +
                        "                    <div class='animated fadeIn' style=\"width: 75%;padding-left:40px \">" +
                        "                        <div style=\"width: 100%;display: flex;position: relative;top: 8%\">" +
                        "                            <div style=\"font-size: 18px;width: 20%\">登录名</div>" +
                        "                            <input id=\"loginName\" readonly style=\"cursor: not-allowed;border: none;width: 70%;font-size: 18px\"" +
                        "                                    type=\"text\">" +
                        "                        </div>" +
                        "                        <div class=\"line\" style=\"height: 30px\"></div>" +
                        "                        <div style=\"width: 100%;display: flex;position: relative;top: 8%\">" +
                        "                            <div style=\"font-size: 18px;width: 20%\">姓名</div>" +
                        "                            <input onchange='modifyInfo(this)' id=\"name\" style=\"border: none;width: 70%;font-size: 18px\" type=\"text\">" +
                        "                        </div>" +
                        "                        <div class=\"line\" style=\"height: 30px\"></div>" +
                        "                        <div style=\"width: 100%;display: flex;position: relative;top: 8%\">" +
                        "                            <div style=\"font-size: 18px;width: 20%\">电话</div>" +
                        "                            <input maxlength='20' onchange='modifyInfo(this)' id=\"tel\" style=\"border: none;width: 70%;font-size: 18px\" type=\"text\">" +
                        "                        </div>" +
                        "                        <div class=\"line\" style=\"height: 30px\"></div>" +
                        "                        <div style=\"width: 100%;display: flex;position: relative;top: 8%\">" +
                        "                            <div style=\"font-size: 18px;width: 20%\">住址</div>" +
                        "                            <input onchange='modifyInfo(this)' id=\"address\" style=\"border: none;width: 70%;font-size: 18px\" type=\"text\">" +
                        "                        </div>" +
                        "                        <div class=\"line\" style=\"height: 30px\"></div>" +
                        "                        <div style=\"width: 100%;display: flex;position: relative;top: 8%\">" +
                        "                            <div style=\"font-size: 18px;width: 20%\">注册日期</div>" +
                        "                            <input id=\"createTime\" readonly style=\"cursor: not-allowed;border: none;width: 70%;font-size: 18px\" type=\"text\">" +
                        "                        </div>" +
                        "                        <div class=\"line\" style=\"height: 30px\"></div>" +
                        "                    </div>" +
                        "                    <!--                    头像-->" +
                        "                    <div id='profileDiv' class='animated fadeIn' style=\"width: 25%\">                               " +
                        "                        <input onchange=\"changeProfile(this)\" type=\"file\" id=\"profile\" name=\"profile\" style=\"display: none;\">" +
                        "                        <div onclick='$(\"#profile\").click();' style=\"border-radius: 20px;width: 150px; position: relative;height:" +
                        "                            150px;box-shadow: 0 0 8px;top: 30px;left: 30px;\">" +
                        "                           <span style='position: relative;top: 45%;left: 18%;font-size: 15px'>点击上传头像</span>" +
                        "                       </div>" +
                        "                    </div>");
                    getInfo();
                } else if (options.id == '2') {
                    appendArea.append(" <!--                    信息-->" +
                        "                    <div class='animated fadeIn' style=\"width: 90%;padding-left:40px;padding-top: 25px \">" +
                        "                        <div style=\"width: 100%;display: flex;position: relative;top: 8%\">" +
                        "                            <div style=\"font-size: 18px;width: 11%\">原密码</div>" +
                        "                            <input id=\"oldPwd\" style=\"border: none;width: 70%;font-size: 18px\" type=\"password\">" +
                        "                        </div>" +
                        "                        <div class=\"line\" style=\"height: 30px;margin-left: 75px;width: 80%\"></div>" +
                        "                        <div style=\"width: 100%;display: flex;position: relative;top: 8%\">" +
                        "                            <div style=\"font-size: 18px;width: 11%\">新密码</div>" +
                        "                            <input id=\"newPwd\" style=\"border: none;width: 70%;font-size: 18px\" type=\"password\">" +
                        "                        </div>" +
                        "                        <div class=\"line\" style=\"height: 30px;margin-left: 75px;width: 80%\"></div>" +
                        "                        <div style=\"width: 100%;display: flex;position: relative;top: 8%\">" +
                        "                            <div style=\"font-size: 18px;width: 11%\">密码确认</div>" +
                        "                            <input id=\"pwdConfirm\" style=\"border: none;width: 70%;font-size: 18px\" type=\"password\">" +
                        "                        </div>" +
                        "                        <div class=\"line\" style=\"height: 30px;margin-left: 75px;width: 80%\"></div>" +
                        "                       <div style=\"width: 10%;display: flex;position: relative;top: 8%\">  " +
                        "                           <button id=\"modifyPwdBtn\" type=\"button\" onclick='modifyPwd()'" +
                        "                       style=\"width: 100%;background-color: #000000;color: white;border: #000000;cursor:" +
                        "                       pointer;height: 35px;border-radius: 9px\">提交修改</button>" +
                        "                       </div>  " +
                        "                    </div>");
                }
            });


        });
    });

    function modifyPwd() {
        let oldPwd = $("#oldPwd").val();
        let newPwd = $("#newPwd").val().trim();
        let pwdConfirm = $("#pwdConfirm").val().trim();
        let password = $("#password").val().trim();
        if (oldPwd == '' || newPwd == '' || pwdConfirm == '') {
            layer.msg("请完善信息");
        } else if (newPwd != pwdConfirm) {
            layer.msg("新密码两次输入不一致");
        } else if (oldPwd != password) {
            layer.msg("原密码错误");
        } else if (newPwd == password) {
            layer.msg("新旧密码不能相同");
        } else {
            $.get("/userController/modifyInfo", {loginName: getQueryVariable("loginName"), password: newPwd}, function
                (resp) {
                if (resp.code == 0) {
                    layer.msg(resp.msg);
                    setTimeout(() => run(), 1800);

                    async function run() {
                        await setTimeout;
                        window.location.reload();
                    }
                } else {
                    layer.msg(resp.msg);
                }
            }, "json");
        }

    }

    function getInfo(layer) {
        let loginName = $("#loginName");
        let tel = $("#tel");
        let name = $("#name");
        let address = $("#address");
        let createTime = $("#createTime");
        let password = $("#password");
        $.get("/userController/getInfo", {loginName: getQueryVariable("loginName")}, function (resp) {
            if (resp.code == 0) {
                loginName.val(resp.data.loginName);
                tel.val(resp.data.tel);
                name.val(resp.data.name);
                address.val(resp.data.address);
                createTime.val(resp.data.createTime);
                password.val(resp.data.password);
                let profile = resp.data.img;
                if (profile != null && profile != '') {
                    $("#profileDiv").empty();
                    $("#profileDiv").append("<input onchange=\"changeProfile(this)\" type=\"file\" id=\"profile\" name=\"profile\" style=\"display: none;\">\n" +
                        "   <div onclick='$(\"#profile\").click();' style=\"border-radius: 20px;width: 150px; background:" +
                        "    url('/" + resp.data.img + "') no-repeat center;background-size: contain;position: relative;height:" +
                        "     150px;box-shadow: 0 0 8px;top: 30px;left: 30px;\">" +
                        "   </div>");
                }
            } else {
                layer.msg(resp.msg);
            }
        }, "json");
    }

    function modifyInfo(e) {
        let item = $(e).attr("id");
        let value = $(e).val();
        let data = {};
        data.loginName = getQueryVariable("loginName");
        if (item == 'name') {
            data.name = value;
        }
        if (item == 'tel') {
            if (isNaN(value)) {
                layer.msg("请输入数字");
                return;
            } else {
                data.tel = value;
            }
        }
        if (item == 'address') {
            data.address = value;
        }
        $.ajax({
            url: "/userController/modifyInfo",
            data: JSON.stringify(data),
            contentType: "application/json",
            type: 'post',
            success: function (resp) { //请求成功后的回调函数
                layer.msg(resp.msg);
            }
        });
    }


    //获得上传的图片的url
    function getObjectURL(file) {
        var url = null;
        if (window.createObjectURL != undefined) { // basic
            url = window.createObjectURL(file);
        } else if (window.URL != undefined) { // mozilla(firefox)
            url = window.URL.createObjectURL(file);
        } else if (window.webkitURL != undefined) { // webkit or chrome
            url = window.webkitURL.createObjectURL(file);
        }
        return url;
    }

    function changeProfile(e) {
        var formData = new FormData();
        formData.append("imgFile", $(e)[0].files[0]);
        formData.append("loginName", getQueryVariable("loginName"));
        $.ajax({
            url: '/userController/changeProfile',
            type: 'post',
            data: formData,
            contentType: false,
            processData: false,
            success: function (resp) {
                if (resp.code == 0) {
                    window.location.reload();
                } else {
                    layer.msg(resp.msg);
                }
            }
        })
    }


</script>
</body>
</html>